<%@ page isELIgnored="false" contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>369云工厂--首页</title>
		<meta name="viewport" content="width=device-width,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no,initial-scale=1.0">
		<link rel="stylesheet" href="css/dist/bootstrap.css" />
		<link rel="stylesheet" href="css/dist/bootstrap-theme.min.css" />
		<!--用户控制动画-->
		<link rel="stylesheet" href="css/dist/animate.css" />
		<!--自定义css-->
		<link rel="stylesheet" href="css/style.css" />
	</head>
	<body>
		<!--固顶nav-->
		<div class="wraper">
		    <div class="header-blue">
		        <div class="header-con">
		            <div class="header-logo">
		                <a href="#"><img src="img/logo-2.png" alt="369云工厂" /></a>
		            </div>
		            <div class="nav">
		                <ul>
		                    <li class="nav-item cur"><a href="#">首页</a></li>
		                    <li class="nav-item "><a href="factory.action">云工厂</a></li>
		                    <li class="nav-item"><a href="service.action">服务</a></li>
		                    <li class="nav-item"><a href="activity.action">活动</a></li> 
		                    <li class="nav-item"><a href="news.action">新闻</a></li>
		                </ul>
		                <!--移动的滑动-->
		                <div class="move-bg"></div>
		                <!--移动的滑动 end-->
		            </div>
		             <div class="header-right">
		                <a href="#" class="visit visit1" id="visit ">预约参观</a>
		                <a href="#" class="user-center"><img src="img/center.png" alt="云工厂用户中心"></a>
		            </div>
		        </div>
		    </div>
		    <div class="header">
		        <div class="header-con">
		            <div class="header-logo">
		                <a href="#"><img src="img/logo-1.png" alt="369云工厂" /></a>
		            </div>
		            <div class="nav">
		                <ul>
		                    <li class="nav-item cur"><a href="#">首页</a></li>
		                    <li class="nav-item "><a href="factory.action">云工厂</a></li>
		                    <li class="nav-item"><a href="service.action">服务</a></li>
		                    <li class="nav-item"><a href="activity.action">活动</a></li> 
		                    <li class="nav-item"><a href="news.action">新闻</a></li>
		                </ul>
		                <!--移动的滑动-->
		                <div class="move-bg move-bg1"></div>
		                <!--移动的滑动 end-->
		            </div>
		            <div class="header-right">
		                <a href="#" class="visit" id="visit">预约参观</a>
		                <a href="#" class="user-center"><img src="img/center.png" alt="云工厂用户中心"></a>
		            </div>
		        </div>
		    </div>
		</div>
		<!--以下是banner部分-->
		<div class="container-fluid banner-full" >
			<div class="banner-conner text-center wow fadeInDown" data-wow-duration="3s" data-wow-delay="3s"><img src="img/ad.png" alt="创新创世" /></div>
			<div class="text-center wow fadeInDown" data-wow-duration="3s" data-wow-delay="3s">
				<a href="#" class="btn-Settled">预约入驻</a>
			</div>
			<div class="store text-center clearfix">
				<div class="erweima-contain pull-left  wow fadeInLeft" style="width: 100px;">
					<a href="#" id="ios-store" class="ios-store" data-wow-duration="3s" data-wow-delay="3s">app Store</a>
					<img src="img/banner-erweima.png" id="ios-erweima" />
				</div>
				<div style="width: 100px;" class="erweima-contain pull-right wow fadeInRight">
					<a href="#" id="android-store" class="android-store " data-wow-duration="3s" data-wow-delay="3s">Android</a>
					<img src="img/banner-erweima.png" id="android-erweima" />
				</div>
			</div>
			<div class="text-center banner-bottom wow fadeInUp" data-wow-duration="3s" data-wow-delay="3s">
				<p>innovation factory<p>
				<span>众创生态云工场+创业多维度生活&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;无限可能  创业MAX&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;聚力、创梦、共赢</span>
			</div>
		</div>
		<div class="container-fluid home-bg">
			<div class="container">
				<div class="row">
					<div class="col-lg-4 text-center text-color-w pull-left common1 wow fadeInDown" data-wow-duration="5s" data-wow-delay="8s">
						<img src="img/home.png" alt="基础设施" />
						<h3>基础设施</h3>
						<p>顶尖设计团队打造舒适的灯光与空间体验，从TMT到互联网+，打造逐梦的起点。</p>
					</div>
					<div class="col-lg-4 text-center text-color-w pull-left common1 wow fadeInDown" data-wow-duration="5s" data-wow-delay="8s">
						<img src="img/24H.png" alt="基础设施" />
						<h3>24小时管家</h3>
						<p>24小时管家服务，24小时的工作生活陪伴，随时为您提供服务与帮助，使您感受家的温暖。</p>
					</div>
					<div class="col-lg-4 text-center text-color-w pull-right common1 wow fadeInDown" data-wow-duration="5s" data-wow-delay="8s">
						<img src="img/scope.png" alt="基础设施" />
						<h3>投融资</h3>
						<p>为优质项目提供更多的投融资对接机会；为专业的投资机构、投资人提供更多的项目选择</p>
					</div>
				</div>
			</div>
		</div>
		<div class="container distribution" >
			<div class="row">
				<div class="col-lg-8 distribution-map img-responsive pull-left ">
					<img src="img/China-map.jpg">
				</div>
				<div class="col-lg-4 distribution-data pull-right">
					<div class="counter col_fourth text-center">
					    <span class="timer count-title" id="count-number" data-to="6040424" data-speed="1500">300</span><div class="count-dw">&nbsp;/&nbsp;人</div>
					    <p class="count-text ">入住同好</p>
					</div>
					<div class="counter col_fourth text-center">
					    <span class="timer count-title" id="count-number" data-to="7534842" data-speed="1500">300</span><div class="count-dw">&nbsp;/&nbsp;人</div>
					    <p class="count-text ">拥有工位</p>
					</div>
					<div class="counter col_fourth text-center">
					    <span class="timer count-title" id="count-number" data-to="587534842" data-speed="1500">300</span><div class="count-dw">&nbsp;/&nbsp;元</div>
					    <p class="count-text ">Total Funding</p>
					</div>
					<div class="counter col_fourth text-center">
					    <span class="timer count-title" id="count-number" data-to="932424751" data-speed="1500">300</span><div class="count-dw">&nbsp;/&nbsp;元</div>
					    <p class="count-text ">Market Cap</p>
					</div>
					<div class="counter col_fourth text-center">
					    <span class="timer count-title" id="count-number" data-to="2637" data-speed="1500">300</span><div class="count-dw">&nbsp;/&nbsp;家</div>
					    <p class="count-text ">服务机构</p>
					</div>
				</div>
			</div>
		</div>
		<div>
			<div class="row-fluid">
				<div class="span12">
					<div class="carousel slide" id="carousel-768734" data-ride="carousel">
						<ol class="carousel-indicators dots-pos">
							<li data-slide-to="0" data-target="#carousel-768734" class="active">
							</li>
							<li data-slide-to="1" data-target="#carousel-768734">
							</li>
							<li data-slide-to="2" data-target="#carousel-768734" >
							</li>
						</ol>
						<div class="carousel-wz">
							<c:forEach items="${themeActivities}" var="themeActivity" varStatus="var">
							<c:if test="${var.index == 0}"><div class="theme-box hide active"></c:if>
						    <c:if test="${var.index != 0}"><div class="theme-box hide"></c:if>
								<div class="theme-title text-center">
									<h3>${themeActivity.activityName}</h3>
									<img src="img/theme.png" alt="" />
								</div>
								<div class="activity-wz">
									${themeActivity.activityDesc}
								</div>
								<div class="theme-bottom">
									<div class="theme-img pull-left">
										<img src="images/${themeActivity.masterAvatar}" alt="" />
									</div>
									<div class="theme-say pull-left">
										<div class="theme-say-wz">
											${themeActivity.masterDesc}
										</div>
										<div class="theme-say-author">
											<span>${themeActivity.masterCompany}</span>    <span> ${themeActivity.masterPosition}：${themeActivity.masterName}</span>
										</div>
									</div>
								</div>	
							</div>
							</c:forEach>
						</div>	
						<div class="mmm"></div>
						<div class="carousel-inner">
							<div class="item active theme-list" id="0" style="background-image: url(img/bg-2.jpg);"></div>
							<div class="item theme-list" id="1" style="background-image: url(img/bg-3.jpg);"></div>
							<div class="item theme-list" id="2" style="background-image: url(img/bg-4.jpg);"></div>
						</div> 
						<a data-slide="prev" href="#carousel-768734" class="left carousel-control">‹</a> 
						<a data-slide="next" href="#carousel-768734" class="right carousel-control">›</a>
					</div>
				</div>
			</div>
		</div>
		<div class="container links">
			<div class="links-theme"><img src="img/links.png" alt="友情链接" /></div>
		    <c:forEach items="${settledEnterprises}" var="settledEnterprise" varStatus="var">
			    <c:if test="${var.index % 6 == 0}">
	       	<div class="row links-sell wow fadeInDown">
				</c:if>
			    <div class="col-lg-2"><a href="${settledEnterprise.enterpriseHref}"><img src="img/${settledEnterprise.enterpriseIcon}" alt="" /></a></div>
			    <c:if test="${var.index % 6 == 5}">
	       	</div>
				</c:if>
			</c:forEach>
		</div>
		<div class=" container-fluid footer">
			<div class="footer-content">
				<div class="footer-logo">
					<a href="#"><img src="img/logo-3.png"></a>
				</div>
				<div class="footer-address">
					<ul>
						<li>北京市海淀区北太平庄路18号城建大厦C座3层</li>
						<li>400-8369-369</li>
						<li>fangchong@datangnet.com.cn</li>
					</ul>	
				</div>
				<div class="footer-erweima">
					<img src="img/erweima.png" alt="云工厂" />
				</div>
			</div>
		</div>
		<div class="container-fluid footer-bottom text-center">
			© 2016 Copyrights by datangnet - All rights reserved.
		</div>
		<script type="text/javascript" src="js/dist/jquery.min.js" ></script>
		<script type="text/javascript" src="js/dist/bootstrap.js" ></script>
		<script type="text/javascript" src="js/dist/wow.js" ></script>
		<script type="text/javascript" src="js/dist/count.js" ></script>
		<script type="text/javascript" src="js/dist/jquery.movebg.js" ></script>
		<script>
		  	var wow = new WOW({
			    boxClass: 'wow',
			    animateClass: 'animated',
			    offset: 0,
			    mobile: true,
			    live: true
			});
			wow.init();
	 	</script>
		<script>
		//判断首页导航的切换效果
			$(function(){
				//初始化导航所在的位置
				if($(window).scrollTop()>=77){ 
				        $(".header-blue").css({"display":"block"}).stop().animate({top:"0px"},300);
				        $(".header").stop().animate({top:"-77px"},300);
				    }else{ 
				        //$(".header-blue").css({"display":"none"}).stop().animate({top:"-77px"},500);
				        $(".header-blue").stop().animate({top:"-77px"},300);
				        $(".header").stop().animate({top:"0px"},300);
				    }
				$(window).scroll(function(){
				    if($(window).scrollTop()>=77){ 
				        $(".header-blue").css({"display":"block"}).stop().animate({top:"0px"},300);
				        $(".header").stop().animate({top:"-77px"},300);
				    }else{ 
				        //$(".header-blue").css({"display":"none"}).stop().animate({top:"-77px"},500);
				        $(".header-blue").stop().animate({top:"-77px"},300);
				        $(".header").stop().animate({top:"0px"},300);
				    }
				});
			})
		</script>
		<script type="text/javascript">
			$(function(){
				$(".nav").movebg({
					width:55/*滑块的大小*/,
					extra:40/*额外反弹的距离*/,
					speed:300/*滑块移动的速度*/,
					rebound_speed:400/*滑块反弹的速度*/
				});
			})
		</script>
		<!--主题活动内文字内容的切换效果-->
		<script>
			$(function(){
				$('#carousel-768734').on('slide.bs.carousel', function (index) {
				  switch(index.relatedTarget.id){
				  	case "0":
						$(".theme-box:eq(0)").addClass("active").siblings().removeClass("active");
				  	break;
				  	case "1":
				  		$(".theme-box:eq(1)").addClass("active").siblings().removeClass("active");
				  	break;
				  	case "2":
				  		$(".theme-box:eq(2)").addClass("active").siblings().removeClass("active");
				  	break;
				  }
				
				})
			})
		</script>
		<script>
			$(function(){
				$("#ios-store").hover(function(){
					$("#ios-erweima").toggle();
				});
				$("#android-store").hover(function(){
					$("#android-erweima").toggle();
				})
			})
		</script>
	</body>
</html>
